import { useEffect, useState } from "react";
import { unstable_usePrompt } from "react-router-dom";
import { UploadOutlined } from "@ant-design/icons";
import { Button, Divider, Flex, Form, type FormInstance, Input, Upload } from "antd";
import type { Values } from "../types";

interface CreateFormProps {
  onFormInstanceReady: (instance: FormInstance<Values>) => void;
}

export default function CreateForm({ onFormInstanceReady }: CreateFormProps) {
  const [form] = Form.useForm();
  const [hasChanged, setHasChanged] = useState(false);

  useEffect(() => {
    onFormInstanceReady(form);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // https://reactrouter.com/en/main/hooks/use-prompt
  // Block navigating elsewhere when data has been entered into the input
  unstable_usePrompt({
    message: "您还有未保存的修改，确定要离开吗？",
    when: ({ currentLocation, nextLocation }) =>
      hasChanged && currentLocation.pathname !== nextLocation.pathname,
  });

  return (
    <Form
      layout="horizontal"
      form={form}
      name="form_in_modal"
      preserve={false}
      labelAlign="right"
      onChange={() => {
        setHasChanged(true);
      }}
      wrapperCol={{ flex: 1 }}
      className="mt-2 px-4"
    >
      <Form.Item name="name">
        <Flex vertical>
          <Flex vertical>
            <h3 className="text-sm">方式一：输入视频路径</h3>
            <p className="text-xs text-gray-500 my-1">可批量粘贴视频（≤10个），一行一个视频地址</p>
          </Flex>
          <Input.TextArea rows={6} />
        </Flex>
      </Form.Item>
      <Divider style={{ margin: "16px 0" }} />
      <Form.Item name="name">
        <Flex vertical>
          <Flex vertical>
            <h3 className="text-sm">方式二：导入采集视频表格</h3>
            <p className="text-xs text-gray-500 my-1">
              支持
              <a href="https://www.baidu.com" target="_blank" rel="noopener noreferrer">
                千瓜
              </a>
              、
              <a href="https://www.baidu.com" target="_blank" rel="noopener noreferrer">
                灰豚
              </a>
              平台的视频数据，建议分批上传表格分析，一个表格包含视频数量≤10个
            </p>
          </Flex>
          <Upload accept=".xlsx,.xls,.csv">
            <Button size="middle" icon={<UploadOutlined />}>
              选择文件
            </Button>
          </Upload>
        </Flex>
      </Form.Item>
    </Form>
  );
}
